<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<title>视频播放器</title>
<link rel="stylesheet"href="css/font-awesome.css">
<link rel="stylesheet"type="text/css"href="./css/player.css">
</head>
<body>
<figure>
<figcaption>视频播放器</figcaption>
<div class="player">
        <video src="./video/fun.mp4"></video>
        <div class="controls">
            <!--播放/暂停-->
            <a href="javascript:;" class="switch fa fa-play"></a>
            <!--播放进度-->
            <div class="progress">
                <div class="line"></div>
                <div class="bar"></div>
            </div>
            <!--当前播放时间/播放总时长-->
            <div class="timer">
                <span class="current">00:00:00</span> / <span class="total">00:00:00</span>
            </div>
            <!--全屏/取消全屏-->
            <a href="javascript:;" class="expand fa fa-arrows-alt"></a>
        </div>
    </div>
</figure>	
<script type="text/javascript"src="./js/jquery.min.js"></script>			
<script type="text/javascript">
$(function() {
	// 这些方法 属性和事件允许您使用 JavaScript 来操作 audio 和 video 元素
	// 这些 api 是原生js dom 的操作 我们如果使用jQuery千万别忘记转换
	// 获取元素
	var video = $('video').get(0);

	// 把jquery 对象转换为DOM对象

	// 计算时分秒函数
	function formatTime(time) {
		// 计算小时
		// 我们有总秒数 计算 小时
		// 1小时 = 60 * 60 = 3600s
		// 4000 / 3600 = 1h
		var h = Math.floor(time / 3600);
		// 计算 分数

		// 我们有总的秒数 计算分数
		// 4000 % 3600 = 400s / 60 = 6m
		var m = Math.floor(time % 3600 / 60);
		var s = Math.floor(time % 60);
		return (h < 10 ? "0" + h: h) + ":" + (m < 10 ? "0" + m:m) + ":" + (s < 10 ? "0" + s:s)
	}

	// 1. 当我们浏览器可以播放的时候, 就让video显示出来 让我们的时间显示出来
	// oncanplay 是 video 原生时间 所以 用 video Dom对象
	// oncanplay事件:视频可以播放的时候触发
	video.oncanplay = function() {
		$('video').show();
		// 我们怎么得到视频 的长度呢?
		// duration 是视频属性 H5 返回视频的长度, 要用原生的dom对象调用
		// console.log(video.duration);
		// 164.815238秒
		var totalTime = formatTime(video.duration);
		$('.total').text(totalTime)
	}

	// 播放/暂停
	// 当我们点击按钮, 如果有 fa-play 这个我们就切换为 fa-pause  并且播放视频
	$('.switch').on('click', function() {
		if($(this).hasClass('fa-play')) {
			// 播放视频
			video.play();
			// 
			$(this).removeClass('fa-play').addClass('fa-pause')
		}

		else {
			video.pause();
			$(this).removeClass('fa-pause').addClass('fa-play')
		}

	}

	);

	// 3. 进度条显示 ontimeupdata:当前的播放位置已更改时触发
	// 除了自己进行之外, 只要我们修改了 video.currentTime 就会执行 ontimeupdate
	video.ontimeupdate = function() {
		// console.log(11)
		// 我们需要知道当前的时间
		// console.log(video.currentTime)
		// 计算公式:当前时间 / 总时间 = 当前进度条长度 / 总长度
		// 进度条总长度
		// var lineLength = $('.bar').width()
		// 当前进度条长度
		var w = video.currentTime / video.duration * 100 + '%';
		$('.line').css("width",w);
		$('.current').text(formatTime(video.currentTime));
	}

	// 4. 全屏操作
	$('.expand').on('click', function() {

		if($(this).hasClass('fa-arrows-alt')) {
			requestFullScreen($('.player').get(0));
			$(this).removeClass('fa-arrows-alt').addClass('fa-compress');
		}

		else {
			$(this).removeClass('fa-compress').addClass('fa-arrows-alt');
			cancelFullScreen(document)
		}

	})

	//
	// 5.视频播放结束之后,重置操作
	 //视频播放完毕 用onended事件
	 video.onended = function(){
	 	video.currentTime = 0;
	 	$('.switch').addClass('fa-play').removeClass('fa-pause');
	 } 

	 // 6. 点击bar 跃进效果
	 $(".bar").on('click',function(event){
	 	// 当前位置
	 	var offset = event.offsetX;
	 	
	 	var current = offset / $(this).width() * video.duration;
	 	video.currentTime = current;
	 })



	

	// 开启全屏函数
	function requestFullScreen(node) {
		if(node.requestFullScreen) {
			node.requestFullScreen();
		}

		else if(node.webkitRequestFullScreen) {
			node.webkitRequestFullScreen();
		}

		else if(node.mozRequestFullScreen) {
			node.webkitRequestFullScreen();
		}

		else {
			node.oRequestFullScreen();
		}

	}

	// 取消全屏
	function cancelFullScreen(node) {
		if(node.cancelFullScreen) {
			node.cancelFullScreen();
		}

		else if(node.webkitCancelFullScreen) {
			node.webkitCancelFullScreen();
		}

		else if(node.mozCancelFullScreen) {
			node.mozCancelFullscreen();
		}

		else if(node.msCancelFullscreen) {
			node.msCancelFullscreen();
		}

		else {
			node.oCancelFullScreen();
		}

	}

}

)
</script>
</body>
</html>
